<label class="item-label">{$field.title|htmlspecialchars}
    <if condition="$field['subtitle']">
        <span class="check-tips">（{$field.subtitle}）</span>
    </if>
</label>
<if condition="$field['name'] == 'action'">
    <p style="color: #f00;">
        {:L("_DEVELOPMENT_STAFF_ATTENTION_")}{:L("_YOU_USE_A_FIELD_NAMED_ACTION_")}，{:L("_BECAUSE_THIS_FIELD_NAME_WILL_BE_WITH_FORM_")}[action]{:L("_CONFLICT_WHICH_CAUSES_THE_FORM_TO_BE_UNABLE_TO_COMMIT_PLEASE_USE_ANOTHER_NAME_")}</p>
</if>
<div class="controls ">
    <switch name="field.type">
        <case value="text">
            <input type="text" name="{$field.name}" value="{$field.value|htmlspecialchars}"
                   class="text input-large form-control" style="width: 400px"/>
        </case>

        <case value="label">
            {$field.value}
        </case>


        <case value="hidden">
            <input type="hidden" name="{$field.name}" value="{$field.value}" class="text input-large"/>
        </case>
        <case value="readonly">
            <input type="hidden" name="{$field.name}" value="{$field.value}" class="text input-large form-control"
                   style="width: 400px" placeholder={:L("_NO_NEED_TO_FILL_IN_WITH_DOUBLE_")} readonly/>
            <p class="lead">{$field.value}</p>
        </case>
        <case value="area_readonly">
            <p class="lead">{$field.value}</p>
        </case>
        <case value="integer">
            <input type="text" name="{$field.name}" value="{$field.value}" class="text input-large form-control"
                   style="width: 400px"/>
        </case>
        <case value="uid">
            <input type="text" name="{$field.name}" value="{$field.value}" class="text input-large form-control"
                   style="width: 100px"/>
        </case>
        <case value="select">
            <select name="{$field.name}" class="form-control" style="width:auto;">
                <volist name="field.opt" id="option">
                    <php>
                        $selected = $field['value']==$key ? 'selected' : '';
                    </php>
                    <option value="{$key}"
                            {$selected}>{$option|htmlspecialchars}
                    </option>
                </volist>
            </select>
        </case>
        <case value="colorPicker">
            <php>
                $colorPicker = 1;
            </php>
            <div class="color-picker" style="width:100px;height: 30px;">
                <input type="text" name="{$field.name}" class="simple_color_callback form-control"
                       onchange="setColorPicker(this);" value="{$field.value|default=''}" style="width: 100px;"/>
            </div>
        </case>
        <case value="radio">
            <volist name="field.opt" id="option">
                <php>
                    $checked = $field['value']==$key ? 'checked' : '';
                    $inputId = "id_$field[name]_$key";
                </php>
                <label for="{$inputId}"> <input id="{$inputId}" name="{$field.name}" value="{$key}" type="radio"
                                                {$checked}/>
                    {$option}</label> &nbsp;&nbsp;&nbsp;&nbsp;
            </volist>
        </case>
        <case value="icon">
            <div class='icon-chose' title={:L("_SELECT_ICON_WITH_DOUBLE_")} style="width: 400px;">
                <select name="{$field.name}" title={:L("_SELECT_ICON_WITH_DOUBLE_")} class="chosen-icons"
                        data-value="{$field.value|default='icon-star'}"></select>
            </div>
            <php>
                if(!$have_icon){
                $have_icon=1;
            </php>
            <script src="__ZUI__/lib/chosen/chosen.icons.min.js"></script>
            <link href="__ZUI__/lib/chosen/chosen.icons.css" rel="stylesheet">
            <php>}</php>
            <script>
                $(function () {
                    $('.chosen-container').remove()
                    $('form select.chosen-icons').attr('class', 'chosen-icons');
                    $('form select.chosen-icons').data('zui.chosenIcons', null);
                    $('form select.chosen-icons').data('chosen', null);
                    $('form select.chosen-icons').chosenIcons();
                });
            </script>
        </case>

        <case value="singleFile">
            {:W('Common/UploadFile/render',array(array('name'=>$field['name'],'value'=>$field['value'])))}
        </case>
        <case value="multiFile">
            {:W('Common/UploadMultiFile/render',array(array('name'=>$field['name'],'limit'=>9,'value'=>$field['value'])))}
        </case>
        <case value="singleImage">
            <div class="controls">
                <div id="upload_single_image_{$field.name}" style="padding-bottom: 5px;">{:L("_SELECT_PICTURES_")}</div>
                <input class="attach" type="hidden" name="{$field.name}" value="{$field['value']}"/>
                <div class="upload-img-box">
                    <div class="upload-pre-item popup-gallery">

                        <notempty name="field.value">
                            <div class="each">
                                <a href="{$field.value|get_cover='path'}" title={:L("_CLICK_TO_SEE_THE_BIG_PICTURE_WITH_DOUBLE_")}>
                                    <img src="{$field.value|get_cover='path'}">
                                </a>
                                <div class="text-center opacity del_btn" ></div>
                                <div onclick="admin_image.removeImage($(this),'{$field.value}')"  class="text-center del_btn">{:L("_DELETE_")}</div>
                            </div>
                        </notempty>
                    </div>
                </div>
            </div>
            <script>
                $(function () {
                    var uploader_{$field.name}= WebUploader.create({
                        // 选完文件后，是否自动上传。
                        auto: true,
                        // swf文件路径
                        swf: 'Uploader.swf',
                        // 文件接收服务端。
                        server: "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
                        // 选择文件的按钮。可选。
                        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                        pick: '#upload_single_image_{$field.name}',
                        // 只允许选择图片文件
                        accept: {
                            title: 'Images',
                            extensions: 'gif,jpg,jpeg,bmp,png',
                            mimeTypes: 'image/*'
                        }
                    });
                    uploader_{$field.name}.on('fileQueued', function (file) {
                        uploader_{$field.name}.upload();
                    });
                    /*上传成功**/
                    uploader_{$field.name}.on('uploadSuccess', function (file, data) {
                        if (data.status) {
                            $("[name='{$field.name}']").val(data.id);
                            $("[name='{$field.name}']").parent().find('.upload-pre-item').html(
                                    ' <div class="each"><a href="' + data.path + '" title={:L("_CLICK_TO_SEE_THE_BIG_PICTURE_WITH_DOUBLE_")}><img src="' + data.path + '"></a><div class="text-center opacity del_btn" ></div>' +
                                    '<div onclick="admin_image.removeImage($(this),' + data.id + ')"  class="text-center del_btn">{:L("_DELETE_")}</div></div>'
                            );
                            uploader_{$field.name}.reset();
                        } else {
                            updateAlert(data.info);
                            setTimeout(function () {
                                $('#top-alert').find('button').click();
                                $(that).removeClass('disabled').prop('disabled', false);
                            }, 1500);
                        }
                    });
                })
            </script>

        </case>

        <case value="multiImage">
            <div class="controls multiImage">
                <div id="upload_multi_image_{$field.name}" style="padding-bottom: 5px;">{:L("_SELECT_PICTURES_")}</div>
                <input class="attach" type="hidden" name="{$field.name}" value="{$field['value']}"/>
                <div class="upload-img-box">
                    <div class="upload-pre-item popup-gallery">

                        <notempty name="field.value">
                            <php>$aIds = explode(',',$field['value']);</php>
                            <volist name="aIds" id="aId">
                                <div class="each">
                                    <a href="{$aId|get_cover='path'}"
                                       title={:L("_CLICK_TO_SEE_THE_BIG_PICTURE_WITH_DOUBLE_")}>
                                        <img src="{$aId|get_cover='path'}">
                                    </a>
                                    <div class="text-center opacity del_btn"></div>
                                    <div onclick="admin_image.removeImage($(this),'{$aId}')"
                                         class="text-center del_btn">{:L("_DELETE_")}
                                    </div>
                                </div>
                            </volist>


                        </notempty>
                    </div>
                </div>
            </div>
            <script>
                $(function () {
                    var id = "#upload_multi_image_{$field.name}";
                    var limit = parseInt('{$field.opt}');
                    var uploader_{$field.name}= WebUploader.create({
                        // 选完文件后，是否自动上传。
                        // sw{:L("_F_FILE_PATH_")}
                        swf: 'Uploader.swf',
                        // 文件接收服务端。
                        server: "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
                        // 选择文件的按钮。可选。
                        // 内部根据当前运行是创建，可能是input元素，{:L("_AND_IT_COULD_BE_FLASH_")}.
                        //pick: '#upload_multi_image_{$field.name}',
                        pick: {'id': id, 'multi': true},
                        fileNumLimit: limit,
                        // 只允许{:L("_SELECT_PICTURES_")}文件。
                        accept: {
                            title: 'Images',
                            extensions: 'gif,jpg,jpeg,bmp,png',
                            mimeTypes: 'image/*'
                        }
                    });
                    uploader_{$field.name}.on('fileQueued', function (file) {
                        uploader_{$field.name}.upload();
                    });
                    uploader_{$field.name}.on('uploadFinished', function (file) {
                        uploader_{$field.name}.reset();
                    });
                    /*上传成功**/
                    uploader_{$field.name}.on('uploadSuccess', function (file, data) {
                        if (data.status) {
                            var ids = $("[name='{$field.name}']").val();
                            ids = ids.split(',');
                            if( ids.indexOf(data.id) == -1){
                                var rids = admin_image.upAttachVal('add',data.id, $("[name='{$field.name}']"));
                                if(rids.length>limit){
                                    updateAlert({:L('_EXCEED_THE_PICTURE_LIMIT_WITH_SINGLE_')});
                                    return;
                                }
                                $("[name='{$field.name}']").parent().find('.upload-pre-item').append(
                                        ' <div class="each"><a href="'+ data.path+'" title={:L("_CLICK_TO_SEE_THE_BIG_PICTURE_WITH_DOUBLE_")}><img src="'+ data.path+'"></a><div class="text-center opacity del_btn" ></div>' +
                                        '<div onclick="admin_image.removeImage($(this),'+data.id+')"  class="text-center del_btn">{:L("_DELETE_")}</div></div>'
                                );
                            }else{
                                updateAlert({:L('_THE_PICTURE_ALREADY_EXISTS_WITH_SINGLE_')});
                            }
                        } else {
                            updateAlert(data.info);
                            setTimeout(function () {
                                $('#top-alert').find('button').click();
                                $(that).removeClass('disabled').prop('disabled', false);
                            }, 1500);
                        }
                    });
                })
            </script>

        </case>

        <case value="checkbox">
            <php>
                $importCheckBox = true;
            </php>
            <php>
                $field['value_array'] = explode(',', $field['value']);
            </php>
            <volist name="field.opt" id="option">
                <php>
                    $checked = in_array($key,$field['value_array']) ? 'checked' : '';
                    $inputId = "id_$field[name]_$key";
                </php>
                <label for="{$inputId}"> <input type="checkbox" value="{$key}" id="{$inputId}" class="oneplus-checkbox"
                                                data-field-name="{$field.name}" {$checked}/>
                    {$option}</label>

            </volist>
            <input type="hidden" name="{$field.name}" class="oneplus-checkbox-hidden"
                   data-field-name="{$field.name}" value="{$field.value}"/>

        </case>
        <case value="editor">
            {:W('Common/Ueditor/editor',array($field['name'],$field['name'],$field['value'],$field['style']['width'],$field['style']['height'],$field['config']))}

        </case>
        <case value="textarea">
        <textarea name="{$field.name}" class="text input-large form-control"
                  style="height: 8em;width: 400px;height: 200px">{$field.value|htmlspecialchars}</textarea>
        </case>
        <case value="time">
            <php>
                $importDatetimePicker = true;
                //默认为当前时间
                if(!$field['value']){
                $field['value'] = time();
                }
            </php>
            <input type="hidden" name="{$field.name}" value="{$field.value}"/>
            <div class="input-group date">
                <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                </div>
                <input type="text" data-field-name="{$field.name}"
                       class="text input-large form-time time form-control pull-left"
                       style="width: 282px" value="{$field.value|time_format='H:i'}"
                       placeholder={:L("_PLEASE_CHOOSE_TIME_WITH_DOUBLE_")}/>
            </div>
        </case>
        <case value="date">
            <php>
                $importDatetimePicker = true;
                //默认为当前时间
                if(!$field['value']){
                $field['value'] = time();
                }
            </php>

            <input type="hidden" name="{$field.name}" value="{$field.value}"/>
            <div class="input-group date">
                <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                </div>
                <input type="text" data-field-name="{$field.name}"
                       class="text input-large form-date time form-control pull-left"
                       style="width: 282px" value="{$field.value|time_format='Y-m-d'}"
                       placeholder={:L("_PLEASE_CHOOSE_TIME_WITH_DOUBLE_")}/>
            </div>
        </case>
        <case value="datetime">
            <php>
                $importDatetimePicker = true;
                //默认为当前时间
                if(!$field['value']){
                $field['value'] = time();
                }
            </php>
            <input type="hidden" name="{$field.name}" value="{$field.value}"/>
            <div class="input-group date">
                <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                </div>
                <input type="text" data-field-name="{$field.name}"
                       class="text form-datetime time form-control pull-left"
                       style="width: 282px" value="{$field.value|time_format}"
                       placeholder={:L("_PLEASE_CHOOSE_TIME_WITH_DOUBLE_")}/>
            </div>
        </case>

        <!--添加城市选择（需安装城市联动插件,css样式不好处理排版有点怪）-->
        <case value="city">
            <style type="text/css">
                .form-control {
                    display: inline-block;
                    width: 120px;
                }
            </style>
            <!--修正在编辑信息时无法正常显示已经保存的地区信息-->
            {:hook('J_China_City',array('province'=>$field['value']['0'],'city'=>$field['value']['1'],'district'=>$field['value']['2'],'community'=>$field['value']['3']))}
        </case>

        <!--弹出窗口选择并返回值（目前只支持返回ID）开始->
        <case value="dataselect">
            <input type="text" name="{$field.name}" id="{$field.name}" value="{$field.value|htmlspecialchars}"
                   class="text input-large form-control" style="width: 400px;display:inline-block;"/><input class="btn" style="margin-left:10px" type="button" value={:L("_CHOICE_WITH_DOUBLE_")} onclick="openwin('{$field.opt}','600','500')">
                     <script type="text/javascript">
                            //弹出窗口
                            function openwin(url,width,height){
                                var l=window.screen.width ;
                                var w= window.screen.height;
                                var al=(l-width)/2;
                                var aw=(w-height)/2;
                                var OpenWindow=window.open(url,{:L("_POP_UP_WINDOW_WITH_DOUBLE_")},"toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width="+width+",height="+height+",top="+aw+",left="+al+"");
                                OpenWindow.focus();
                            if(OpenWindow!=null){ //弹出窗口关闭事件
                            //if(window.attachEvent) OpenWindow.attachEvent("onbeforeunload",   quickOut);
                            if(window.attachEvent) OpenWindow.attachEvent("onunload",   quickOut);
                            }
                            }
                            //关闭触发方法
                            function quickOut()
                            {
                            alert({:L("_THE_WINDOW_IS_CLOSED_WITH_DOUBLE_")});
                            }
                     </script>
        </case>
        <!--弹出窗口选择并返回值（目前只支持返回ID）结束 -->

        <case value="nestable">
            <php>$has_nestable=1;</php>
            <input type="hidden" name="{$field.name}" value='{:json_encode($field["value"])}'/>
            <div class="nestables nestable-group" data-name="{$field.name}">
                <php>foreach($field['value'] as $key =>$nestable){</php>
                <div class="portlet light bordered" data-id="{$nestable['data-id']}" data-title="{$nestable['title']}"
                     style="float:left;margin-right:10px;width: {$nestable['width']|default=300}px;">
                    <div class="portlet-title">
                        <div class="caption">
                            <span class="caption-subject font-green sbold uppercase"><strong>{$nestable['title']}</strong></span>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div class="dd nestable_list_one" id="nestable_list_{$key+1}">
                            <notEmpty name="nestable.items">
                                <ol class="dd-list">
                                    <volist name="nestable.items" id="vo">
                                        <li class="dd-item" data-id="{$vo.data-id}" data-title="{$vo.title}">
                                            <div class="dd-handle"> {$vo.title}</div>
                                        </li>
                                    </volist>
                                </ol>
                                <else/>
                                <div class="dd-empty"></div>
                            </notEmpty>
                        </div>
                    </div>
                </div>
                <php>}</php>
                <div class="clearfix"></div>
            </div>
        </case>
        <case value="chosen">
            <php>$chosen_select2=true;</php>
            <select name="{$field.name}[]" class="form-control select2 select2-hidden-accessible" multiple=""
                    data-placeholder="{$field.title}" style="width: 400px" tabindex="-1" aria-hidden="true">
                <php>
                    if( key($field['opt']) === 0){
                </php>
                <volist name="field['opt']" id="option">
                    <php>
                        $selected = in_array(reset($option),$field['value'])? 'selected' : '';
                    </php>
                    <option value="{:reset($option)}" {$selected}>{$option|end|htmlspecialchars}</option>
                </volist>
                <php>
                    }else{
                    foreach($field['opt'] as $optgroupkey =>$optgroup){
                </php>
                <optgroup label="{$optgroupkey}">
                    <volist name="optgroup" id="option">
                        <php>
                            $selected = in_array(reset($option),$field['value'])? 'selected' : '';
                        </php>
                        <option value="{:reset($option)}" {$selected}>{$option|end|htmlspecialchars}</option>
                    </volist>
                </optgroup>
                <php>
                    }
                    }
                </php>
            </select>
        </case>
        <case value="multiInput">
            <div class="clearfix" style="{$field['style']}">
                <php>
                    $field['name'] = is_array($field['name'])?$field['name']:explode('|',$field['name']);
                    foreach($field['name'] as $key=>$val){
                </php>
                <switch name="field['config'][$key]['type']">
                    <case value="text">
                        <input type="text" name="{$val}" value="{$field['value'][$key]|htmlspecialchars}"
                               class=" pull-left text form-control" style="{$field['config'][$key]['style']}"
                               placeholder="{$field['config'][$key]['placeholder']}"/>
                    </case>
                    <case value="select">
                        <select name="{$val}" class="pull-left form-control" style="{$field['config'][$key]['style']}">
                            <php>foreach($field['config'][$key]['opt'] as $key_opt =>$option){</php>
                            <php>
                                $selected = $field['value'][$key]==$key_opt ? 'selected' : '';
                            </php>
                            <option value="{$key_opt}" {$selected}>{$option|htmlspecialchars}</option>
                            <php>}</php>
                        </select>
                    </case>
                </switch>
                <php>
                    }
                </php>
            </div>
        </case>
        <case value="userDefined">
            {$field.definedHtml}
        </case>


        <case value="autoComplete">

            <php>
                $delimiter = $field['opt']['delimiter']?$field['opt']['delimiter']:',';



            </php>

            <input type="text" name="{$field.name}" value="{$field.value|htmlspecialchars}"
                   class="text input-large form-control" style="width: 400px"/>

            <script src="__PUBLIC__/js/ext/tokeninput/jquery.tokeninput.js"></script>
            <link href="__PUBLIC__/js/ext/tokeninput/token-input-facebook.css" rel="stylesheet">

            <script>
                $(function () {
                    $('[name="{$field.name}"]').tokenInput("{$field['opt']['url']}", {
                        theme: "facebook",
                        preventDuplicates: true,
                        tokenDelimiter: "{$delimiter}",
                        value: '{$field.value|htmlspecialchars}'
                    });
                });
            </script>
        </case>

    <case value="json">
        <script src="__JS__/jquery.jsoneditor.js"></script>
        <link href="__CSS__/jsoneditor.css" rel="stylesheet">
        <div id="{$field.name}" class="json-editor"></div>
        <textarea name="{$field.name}" style="display: none"></textarea>

        <div id="show_div_{$field.name}" style="padding: 0px 30px 10px 30px">{$field.value}</div>
        <script>

            var {$field.name}Class = {
                json:{$field.value},
                    jsonEditor:function () {
                    var obj_this= this;
                    $('#{$field.name}').jsonEditor(obj_this.json, { change: function(data){  obj_this.updateJSON(data)},can_edit:{$field.opt}});
                    },
                printJSON:function () {
                    $('[name="{$field.name}"]').val(JSON.stringify(this.json));
                    $("#show_div_{$field.name}").text(JSON.stringify(this.json));
                },
                updateJSON:function (data) {
                    this.json = data;
                    this.printJSON();
                }
            };

            $(document).ready(function() {
                var aClass = {$field.name}Class;
                $('[name="{$field.name}"]').change(function() {
                    var val = $('[name="{$field.name}"]').val();
                    if (val) {
                        try { aClass.json = JSON.parse(val); }
                        catch (e) { alert('Error in parsing json. ' + e); }
                    } else {
                        aClass.json = {};
                    }

                    aClass.jsonEditor()
                });
                aClass.printJSON();
                aClass.jsonEditor()
            });
        </script>
    </case>




    <default/>
    <span style="color: #f00;">{:L("_ERROR_")}{:L("_COLON_")}{:L("_UNKNOWN_FIELD_TYPE_")}{$field.type}</span>
    <input type="hidden" name="{$field.name}" value="{$field.value|htmlspecialchars}"/>
</switch>
</div>